<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团购APP首页</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header class="clearfix">
        <div class="logo fl"><img src="./img/syimg/logo.png" alt=""></div>
        <div class="cityBar fr">
                <select name="" id="">
                    <option value="">广州市</option>
                    <option value="">深圳市</option>
                </select>
    
            </div>
        <div class="searchBar">
            <input id="srk" type="text" placeholder="请输入商品名称">
            <input type="image" src="./img/syimg/fangdajing.png">
        </div>
        

        
    </header>
    <div id="main">
        <div class="shoushi"><a href="Product details.html"><img src="img/syimg/content.jpg" alt=""></a></div>
        <div class="yhtg">
            <div>
                <img  src="img/syimg/icon1.png" alt="">
                <p>优惠团购</p>
            </div>
                <div>
                <p >更多</p>
                <img  src="img/syimg/icon2.png" alt="">
                </div>
        </div>
        <div class="youhui">
            <ul class="clearfix">
                <li class="fl"><a href=""><img src="./img/syimg/goods.jpg" alt=""></a></li>
                <li class="fl"><a href=""><img src="./img/syimg/goods2.jpg" alt=""></a></li>
                <li class="fl"><a href=""><img src="./img/syimg/goods3.jpg" alt=""></a></li>
                <li class="fl"><a href=""><img src="./img/syimg/goods4.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="yhtg">
            <div>
                <img  src="img/syimg/icon3.png" alt="">
                <p>猜你喜欢</p>
            </div>
            <div>
                <p>更多</p>
                <img  src="img/syimg/icon2.png" alt=""> 
             </div>
        </div>
        <div class="zhy">
            <ul class="clearfix">
                <li class="fl"><img src="img/syimg/food.jpg" alt=""></li>
                <li class="fl">
                    <a href="Product details.html">
                    <div class="clearfix">
                        <h3 class="fl">万岁寿司（正佳店）</h3><p class="juli fr">&lt;100m</p>
                    </div>
                    <div class="clearfix">
                        <p class="fl">[100店通用] 双人套餐</p>
                    </div>
                    <div class="clearfix">
                        <span class="fl">￥88.00</span>
                        <p class="fr">已售1000</p>
                    </div>
                    </a>
                </li> 
            </ul>
            <ul class="clearfix">
                    <li class="fl"><img src="img/syimg/food2.jpg" alt=""></li>
                    <li class="fl">
                        <a href="Product details.html">
                        <div class="clearfix">
                            <h3 class="fl">周黑鸭（正佳店）</h3><p class="juli fr">&lt;100m</p>
                        </div>
                        <div class="clearfix">
                            <p class="fl">[100店通用] 双人套餐</p>
                        </div>
                        <div class="clearfix">
                            <span class="fl">￥88.00</span>
                            <p class="fr">已售1000</p>
                        </div>
                        </a>
                    </li> 
                </ul>
                <ul class="clearfix">
                    <li class="fl"><img src="img/syimg/food.jpg" alt=""></li>
                    <li class="fl">
                        <a href="Product details.html">
                        <div class="clearfix">
                            <h3 class="fl">万岁寿司（正佳店）</h3><p class="juli fr">&lt;100m</p>
                        </div>
                        <div class="clearfix">
                            <p class="fl">[100店通用] 双人套餐</p>
                        </div>
                        <div class="clearfix">
                            <span class="fl">￥88.00</span>
                            <p class="fr">已售1000</p>
                        </div>
                        </a>
                    </li> 
                </ul>
                <ul class="clearfix">
                        <li class="fl"><img src="img/syimg/food2.jpg" alt=""></li>
                        <li class="fl">
                            <a href="Product details.html">
                            <div class="clearfix">
                                <h3 class="fl">周黑鸭（正佳店）</h3><p class="juli fr">&lt;100m</p>
                            </div>
                            <div class="clearfix">
                                <p class="fl">[100店通用] 双人套餐</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">￥88.00</span>
                                <p class="fr">已售1000</p>
                            </div>
                            </a>
                        </li> 
                    </ul>
        

        </div>

    </div>
    <footer>
        <ul class="clearfix">
            <li class="fl">
                <a href="index.html"><img src="img/syimg/home.png" alt=""></a>
                <p>首页</p>
            </li>
            <li class="fl">
                    <a href="classification.html"><img src="img/syimg/class.png" alt=""></a>
                    <p>分类</p>
            </li>
            <li class="fl">
                    <a href="find.html"><img src="img/syimg/discover.png" alt=""></a>
                    <p>发现</p>
            </li>
            <li class="fl">
                    <a href="My.html"><img src="img/syimg/person.png" alt=""></a>
                    <p>我的</p>
            </li>

        </ul>
    </footer>
    <script>
    
        
            document.body.style.height = window.innerHeight + "px";
        
            /*动态改变根元素字体大小*/
            function recalc() {
                // 获取客户端宽度
                var clientWidth = document.documentElement.clientWidth;
                if(!clientWidth) return;
                // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
                document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';
                
            }
            // 初始化计算rem
            function initRecalc() {
                
                recalc();
                // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
                var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                if(!document.addEventListener) return;
                window.addEventListener(resizeEvt, recalc, false);
                document.addEventListener('DOMContentLoaded', recalc, false);
            }
            initRecalc();
                
                
                
            </script>
</body>
</html>